<template>
	<q-search v-model="searchParams" :config="searchConfig" />
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import $dateFormat from '@q-admin-design-vue/utils/DateFormat';

	const searchForm = [
		{
			componentType: 'datePicker',
			type: 'year',
			key: '日期',
			label: '日期器：',
		},
		{
			componentType: 'datePicker',
			type: 'datetime',
			key: '日期时间',
			dateFormat: 'YYYY-MM-DD HH:mm:ss',
			label: '日期时间器：',
		},
		{
			componentType: 'dateRangPicker',
			type: 'daterange',
			key: 'channelName7',
			label: '日期区间器：',
			dateFormat: 'YYYY-MM-DD',
			valueFormat: 'x',
			defaultValue: [
				$dateFormat.dateTime(`${$dateFormat.subtractDay(29)}`),
				$dateFormat.dateTime(`${$dateFormat.subtractDay(0)}`),
			],
		},
		// {
		// 	componentType: 'dateRangPicker',
		// 	type: 'datetimerange',
		// 	key: 'channelName8',
		// 	label: '日期时间区间器：',
		// 	dateFormat: 'YYYY-MM-DD HH:mm:ss',
		// 	valueFormat: 'x',
		// 	defaultValue: [
		// 		$dateFormat.dateTime(`${$dateFormat.subtractDay(29)} 00:00:00`),
		// 		$dateFormat.dateTime(`${$dateFormat.subtractDay(0)} 23:59:59`),
		// 	],
		// },
	];

	const searchParams = ref({});
	const pickDay = ref([]); // 时间范围设置
	const searchFormData = ref([...searchForm]);
	searchFormData.value.splice(4, 0, {
		componentType: 'dateRangPicker',
		type: 'datetimerange',
		key: 'channelName8',
		label: '日期时间区间器：',
		dateFormat: 'YYYY-MM-DD HH:mm:ss',
		valueFormat: 'x',
		defaultValue: [
			$dateFormat.dateTime(`${$dateFormat.subtractDay(29)} 00:00:00`),
			$dateFormat.dateTime(`${$dateFormat.subtractDay(0)} 23:59:59`),
		],
		handleCalendarChange: date => {
			const [pointDay] = date;
			pickDay.value = pointDay;
		},
		handleFocus: () => {
			pickDay.value = null;
		},
		disabledDate: time => {
			if (!pickDay.value) {
				return false;
			}
			// 取值范围的最小值
			const minRange =
				new Date(pickDay.value).getTime() - 29 * 24 * 60 * 60 * 1000;
			// 取值范围的最大值
			const maxRange =
				new Date(pickDay.value).getTime() + 29 * 24 * 60 * 60 * 1000;
			return time < minRange || time > maxRange;
		},
	});
	const searchConfig = ref({
		labelWidth: 105,
		handlerSearch({ params, type }) {
			/**
			 * params: 搜索项 绑定值
			 * type: 按钮类型 searchForm：搜索按钮  resetForm：重置按钮
			 */
			console.log(params, type);
		},
		// 配置表头内容
		formConfigList: searchFormData,
	});
</script>
